<!-- Top Navbar-->
<div class="navbar">
    <div class="navbar-inner">
        <div class="left"><a href="#" class="link icon-only back router"><i class="icon icon-back"></i></a></div>
        <div class="left">
            <a href="#" class="link icon-only open-popup" data-popup=".popup-demo"><i class="icon icon-bars"></i></a>
        </div>
        <div class="left">
            <a href="#" class="link icon-only open-panel" data-panel="demo-right"><i class="icon icon-bars"></i></a>
        </div>
        <div class="center sliding">{{title}}</div>
        <div class="right">
            <a href="#" class="link icon-only open-popup" data-popup=".popup-demo2"><i class="icon icon-bars"></i></a>
        </div>
        <div class="right">
            <a href="#" class="link icon-only open-panel" data-panel="demo-right2"><i class="icon icon-bars"></i></a>
        </div>
    </div>
</div>
<!-- Scrollable page content -->
<div class="page-content pull-to-refresh-content infinite-scroll" data-ptr-distance="55" data-distance="55">
    <div class="list-block">
        <ul>
            <template v-for="item in items">
                <!-- 演示侧滑按钮 -->
                <li class="swipeout" v-if="item.type == 0">
                    <div class="swipeout-content item-content">
                        <div class="item-inner">{{item.name}}-向右侧滑动</div>
                    </div>
                    <div class="swipeout-actions-left">
                        <a href="#">删除</a>
                    </div>
                </li>
                <li class="swipeout" v-else-if="item.type == 1">
                    <div class="swipeout-content item-content">
                        <div class="item-inner">{{item.name}}-向左侧滑动</div>
                    </div>
                    <div class="swipeout-actions-right">
                        <a href="#" v-on:click="addNotification(item)">通知</a>
                    </div>
                </li>
                <!-- 正常列表 -->
                <li class="item-content" v-else>
                    <div class="item-inner">
                        <div class="item-title">{{item.name}}</div>
                    </div>
                </li>
            </template>
        </ul>
    </div>
</div>
<div class="panel panel-right panel-reveal panel-demo-right">
    <div class="content-block">
        <p>右侧边栏</p>
        <!-- Click on link with "close-panel" class will close panel -->
        <p><a href="#" class="close-panel">关闭</a></p>
    </div>
</div>
<div class="panel panel-right panel-reveal panel-demo-right2">
    <div class="content-block">
        <p>右侧边栏2</p>
        <!-- Click on link with "close-panel" class will close panel -->
        <p><a href="#" class="close-panel">关闭</a></p>
    </div>
</div>

<div class="popup tablet-fullscreen popup-demo">
    <div class="content-block">
        <p>底栏</p>
        <p><a href="#" class="close-popup">关闭</a></p>
    </div>
</div>

<div class="popup tablet-fullscreen popup-demo2">
    <div class="content-block">
        <p>底栏2</p>
        <p><a href="#" class="close-popup">关闭</a></p>
    </div>
</div>